import React, { Component } from 'react'
import '../css/style.css'
import { connect } from 'react-redux'
// connect 用来连接redux

class Todo extends Component {
    render() {
        return (
            <div className='item'>
                <div className='input'>
                    <input ref='input' onKeyDown={(e) => {
                        if (e.keyCode === 13) {
                            var value = this.refs.input.value
                            if (value.length === 0) {
                                alert('请输入内容');
                                return
                            }
                            this.props.add({
                                value: value,
                                type: 'add',
                                status: 0,
                            })
                            this.refs.input.value = ''
                        }
                    }} /><button onClick={() => {
                        var value = this.refs.input.value
                        if (value.length === 0) {
                            alert('请输入内容');
                            return
                        }
                        this.props.add({
                            value: value,
                            type: 'add',
                            status: 0,
                        })
                        this.refs.input.value = ''
                    }}>添加</button>
                </div>
                <div className='content'>
                    {
                        this.props.list.map((item, index) => {
                            return <div key={index}>
                                <input type='checkbox' checked={item.status == 0 ? false : true} onChange={() => {
                                    this.props.change({
                                        type: 'change',
                                        item: item,
                                    })
                                }} />
                                <p>{item.value}</p>
                                <button onClick={() => {
                                    this.props.del({
                                        type: 'del',
                                        item: item,
                                    })
                                }}>删除</button>
                            </div>
                        })
                    }
                </div>
                <div className='btn'>
                    <div><button onClick={() => {
                        this.props.all({
                            type: 'all',
                        })
                    }}>全部</button></div>
                    <div><button onClick={() => {
                        this.props.yes({
                            type: 'yes',
                            status: 1,
                        })
                    }}>已完成</button></div>
                    <div><button onClick={() => {
                        this.props.no({
                            type: 'no',
                            status: 0,
                        })
                    }}>正在进行</button></div>
                    <div><input type='checkbox' onClick={() => {
                        this.props.changeAll({
                            type: 'changeAll',
                            i: 0,
                        })
                    }} /><button onClick={() => {
                        this.props.remove({
                            type: 'remove',
                        })
                    }}>全选删除</button></div>
                </div>
            </div>
        )
    }
}
// 将redux属性添加到 this.props 中
function stateToProps(mutations) {
    return {
        list: mutations.todo.list
    }
}
// 将redux方法添加到 this.props 中
function actionToProps(dispatch) {
    return {
        add: (action) => { dispatch(action) },
        all: (action) => { dispatch(action) },
        yes: (action) => { dispatch(action) },
        no: (action) => { dispatch(action) },
        change: (action) => { dispatch(action) },
        del: (action) => { dispatch(action) },
        remove: (action) => { dispatch(action) },
        changeAll: (action) => { dispatch(action) },
    }
}

export default connect(stateToProps, actionToProps)(Todo)


